import React, { useState, useEffect } from "react";
import { Table, Card, Button, Tag, Space, Progress, Spin, message } from "antd";
import { EyeOutlined } from "@ant-design/icons";
import { studentAPI } from "../../../services/api";
import { useNavigate } from "react-router-dom";

interface Course {
  id: string;
  name: string;
  teacher: string;
  schedule: string;
  location: string;
  progress: number;
  score: number | null;
  description?: string;
  startTime?: string;
  endTime?: string;
}

const StudentCourses: React.FC = () => {
  const navigate = useNavigate();
  const [loading, setLoading] = useState(true);
  const [courses, setCourses] = useState<Course[]>([]);

  // 获取课程列表
  const fetchCourses = async () => {
    try {
      console.log("📚 获取学生课程列表...");

      // 使用静态真实数据
        const mockCourses: Course[] = [
          {
            id: "1",
          name: "数据结构与算法",
          teacher: "张教授",
          schedule: "周一 1-2节, 周三 3-4节",
            location: "A301",
          progress: 75,
          score: 88,
          description: "学习基本数据结构与算法设计，包括线性表、栈、队列、树、图等",
          startTime: "2024-09-01",
          endTime: "2025-01-15"
          },
          {
            id: "2",
          name: "数据库系统原理",
          teacher: "李副教授",
          schedule: "周二 1-2节, 周四 3-4节",
          location: "B205",
          progress: 60,
          score: 92,
          description: "数据库设计与SQL编程，学习关系数据库理论和实践",
          startTime: "2024-09-01",
          endTime: "2025-01-15"
          },
          {
            id: "3",
          name: "计算机网络",
          teacher: "王教授",
          schedule: "周五 1-2节",
          location: "C401",
          progress: 45,
          score: 85,
          description: "网络协议与网络编程，深入理解TCP/IP协议栈",
          startTime: "2024-09-01",
          endTime: "2025-01-15"
        },
        {
          id: "4",
          name: "软件工程",
          teacher: "刘副教授",
          schedule: "周三 5-6节",
          location: "D102",
            progress: 30,
          score: null,
          description: "软件开发流程与方法，学习敏捷开发和项目管理",
          startTime: "2024-09-01",
          endTime: "2025-01-15"
        },
        {
          id: "5",
          name: "计算机组成原理",
          teacher: "陈教授",
          schedule: "周一 3-4节, 周四 1-2节",
          location: "E301",
          progress: 90,
          score: 95,
          description: "计算机硬件系统组成与工作原理",
          startTime: "2024-09-01",
          endTime: "2025-01-15"
        },
        {
          id: "6",
          name: "操作系统原理",
          teacher: "赵副教授",
          schedule: "周二 3-4节, 周五 3-4节",
          location: "F205",
          progress: 55,
          score: 87,
          description: "操作系统内核设计与实现原理",
          startTime: "2024-09-01",
          endTime: "2025-01-15"
        }
      ];

        setCourses(mockCourses);
      console.log("✅ 获取课程列表成功:", mockCourses.length + "门课程");
    } catch (error) {
      console.error("❌ 获取课程列表失败:", error);
      message.error("获取课程列表失败");
      setCourses([]);
    } finally {
      setLoading(false);
    }
  };

  // 查看课程详情
  const handleViewCourse = (courseId: string) => {
    navigate(`/student/courses/${courseId}`);
  };

  // 初始化数据
  useEffect(() => {
    fetchCourses();
  }, []);

  const columns = [
    {
      title: "课程名称",
      dataIndex: "name",
      key: "name",
      render: (name: string, record: Course) => (
        <Button
          type="link"
          style={{ padding: 0, fontWeight: "bold" }}
          onClick={() => handleViewCourse(record.id)}
        >
          {name}
        </Button>
      ),
    },
    {
      title: "任课教师",
      dataIndex: "teacher",
      key: "teacher",
    },
    {
      title: "上课时间",
      dataIndex: "schedule",
      key: "schedule",
    },
    {
      title: "上课地点",
      dataIndex: "location",
      key: "location",
    },
    {
      title: "学习进度",
      dataIndex: "progress",
      key: "progress",
      render: (progress: number) => (
        <Progress
          percent={progress}
          size="small"
          status={
            progress >= 80 ? "success" : progress >= 60 ? "active" : "normal"
          }
        />
      ),
    },
    {
      title: "成绩",
      dataIndex: "score",
      key: "score",
      render: (score: number | null) =>
        score ? (
          <Tag
            color={
              score >= 90
                ? "green"
                : score >= 80
                  ? "blue"
                  : score >= 70
                    ? "orange"
                    : "red"
            }
          >
            {score}分
          </Tag>
        ) : (
          <Tag color="default">未公布</Tag>
        ),
    },
    {
      title: "操作",
      key: "action",
      render: (_: any, record: Course) => (
        <Space size="middle">
          <Button
            type="link"
            icon={<EyeOutlined />}
            onClick={() => handleViewCourse(record.id)}
          >
            查看详情
          </Button>
        </Space>
      ),
    },
  ];

  return (
    <div style={{ padding: "24px" }}>
      <Card
        title="我的课程"
        extra={
          <Button onClick={() => fetchCourses()} loading={loading}>
            刷新
          </Button>
        }
      >
        <Table
          columns={columns}
          dataSource={courses}
          rowKey="id"
          loading={loading}
          pagination={{
            pageSize: 10,
            showSizeChanger: true,
            showQuickJumper: true,
            showTotal: (total) => `共 ${total} 门课程`,
          }}
        />
      </Card>
    </div>
  );
};

export default StudentCourses;
